<template>
    <div class="all">
        <van-nav-bar title="个人资料" left-arrow @click-left="$router.push('main')" class="header" />

        <div class="nav">

            <div class="tou">

                <div class="d">
                    <div>
                        <span class="img">
                            <img class="image_13" referrerpolicy="no-referrer"
                                src="https://lanhu.oss-cn-beijing.aliyuncs.com/pssx3i9jwo2h3673t2hasc9lgv9h0wpal550083fb-d3ff-4356-9a2d-09fd19dac018" />
                        </span>
                    </div>
                    <div class="money">
                        <p>账户余额</p>
                        <div>
                            <span :v-model="num">{{ num || 0 }}</span>
                            <p>贝壳</p>
                        </div>
                    </div>
                </div>
                <div class="c">

                    <span @click="tiao">流水明细</span>

                </div>
            </div>
            <ul class="man">
                <li @click="one(this.num1)">
                    <span><img class="label_1" referrerpolicy="no-referrer"
                            src="https://lanhu.oss-cn-beijing.aliyuncs.com/ps94rs9j39mg8y2qhen4nstm1ztzitekelu2cba679c-a891-4fbe-86bd-8321d53eab65" />{{
                                    num1
                            }}.00</span>
                </li>
                <van-dialog v-model:show="show" title="是否确定充值" :message="mi" show-cancel-button
                    @confirm="conFirm(this.mi)" @cancel="show = false">
                </van-dialog>
                <li @click="tu(this.num2)">
                    <span><img class="label_1" referrerpolicy="no-referrer"
                            src="https://lanhu.oss-cn-beijing.aliyuncs.com/ps94rs9j39mg8y2qhen4nstm1ztzitekelu2cba679c-a891-4fbe-86bd-8321d53eab65" />{{
                                    num2
                            }}.00</span>
                </li>
                <li @click="san(this.num3, this.song)"><span><img class=" label_1" referrerpolicy="no-referrer"
                            src="https://lanhu.oss-cn-beijing.aliyuncs.com/ps94rs9j39mg8y2qhen4nstm1ztzitekelu2cba679c-a891-4fbe-86bd-8321d53eab65" />
                        {{
                                num3
                        }}.00</span>
                    <p>送{{ song }}贝壳</p>
                </li>
                <li @click="si(this.num4, this.song1)"><span><img class=" label_1" referrerpolicy="no-referrer"
                            src="https://lanhu.oss-cn-beijing.aliyuncs.com/ps94rs9j39mg8y2qhen4nstm1ztzitekelu2cba679c-a891-4fbe-86bd-8321d53eab65" />
                        {{
                                num4
                        }}.00</span>
                    <p>送{{ song1 }}贝壳</p>
                </li>
                <li @click="wu(this.num5, this.song2)"><span><img class="label_1" referrerpolicy="no-referrer"
                            src="https://lanhu.oss-cn-beijing.aliyuncs.com/ps94rs9j39mg8y2qhen4nstm1ztzitekelu2cba679c-a891-4fbe-86bd-8321d53eab65" />{{
                                    num5
                            }}.00</span>
                    <p>送{{ song2 }}贝壳</p>
                </li>
                <li @click="liu(this.num6, this.song3)"><span><img class="label_1" referrerpolicy="no-referrer"
                            src="https://lanhu.oss-cn-beijing.aliyuncs.com/ps94rs9j39mg8y2qhen4nstm1ztzitekelu2cba679c-a891-4fbe-86bd-8321d53eab65" />{{
                                    num6
                            }}.00</span>
                    <p>送{{ song3 }}贝壳</p>
                </li>

            </ul>

            <div class="top_up">
                <div class="top">
                    <van-icon name="cash-back-record" class="tu" />
                    <!-- <input type="text" v-model="zimi" placeholder="自定义金额" class="ipt"> -->
                    <van-field v-model="zimi" type="number" placeholder="自定义金额" class="ipt"
                        :styel="{ width: '100%', height: '40%' }" />
                </div>
                <span class="btn" @click="chong(zimi)">确认充值</span>

            </div>
            <div class="explain">

                <h1>充值说明：</h1>
                <p>1.充值金额可以用于购买平台内商品</p>
                <p>2.充值金额不会过期，但不可转赠他人，不可用于运费抵扣</p>
                <p>3.盲盒商品一经售出，非质量问题不支持7天无理由退换货</p>
                <p>4.盲盒商品2件起包邮，偏远地区不包邮</p>
                <p>5.8周岁以下未成年人，请停止购买盲盒产品; 8周岁以上未成年人充值，需由监护人陪同并监督下购买</p>
                <p>6.充值前请您仔细阅读《用户协议》,成功充值即代表您对协议无异议。</p>
            </div>
        </div>
    </div>

</template>
<script>
import api from '@/api';

import { Toast } from 'vant';
export default {
    data() {
        return {
            num: '',
            num1: 30,
            num2: 50,
            num3: 100,
            num4: 200,
            num5: 600,
            num6: 1000,
            show: false,
            mi: '',
            zimi: '',
            song: 10,
            song1: 30,
            song2: 100,
            song3: 200,

        }
    },
    created() {
        this.cha();
    },
    methods: {
        tiao() {
            setTimeout(() => {
                if (this.$store.state.duan.num) {
                    console.log(this.$store.state.duan.num);
                    this.$router.push({ name: 'Liu' })
                } else {
                    this.$router.push({ name: 'liushui' })
                }

            }, 200)
        },
        async cha() {
            let id = this.$store.state.bian.data;
            // console.log(id);
            let { data } = await api.chaxun(id);
            // console.log(data);
            this.num = data.data;
            this.$store.commit('duan/setNum', this.num);
        },
        async conFirm(a) {
            let id = this.$store.state.bian.data;
            // console.log(id);
            let { data } = await api.chongzhi(id, a);
            console.log(data);
            // this.zimi = '';
            this.cha();

            if (data.data) {
                console.log(data.data);
                Toast({
                    message: data.data,
                    position: "top",
                    overlay: 1,
                    duration: 300,
                });
            }
        },
        one(a) {
            this.show = true;
            this.mi = a;
        },
        tu(a) {
            this.show = true;
            this.mi = a;
        },
        san(a, b) {
            this.show = true;
            this.mi = a + b;
            console.log(a + b);
        },
        si(a, b) {
            this.show = true;
            this.mi = a + b;
            console.log(a + b);
        },
        wu(a, b) {
            this.show = true;
            this.mi = a + b;
            console.log(a + b);
        },
        liu(a, b) {
            this.show = true;
            this.mi = a + b;
            console.log(a + b);
        },
        chong(a) {
            if (a) {
                this.show = true;
                this.mi = a;
                // console.log(a);
            } else {
                Toast({
                    message: "请输入充值金额",
                    position: "top",
                    overlay: 1,
                    duration: 300,
                });
            }
        }
    },
}
</script>
<style scoped>
.nav {
    width: 100%;
    height: 93%;
    display: flex;
    justify-content: center;
    align-content: space-around;
    flex-wrap: wrap;
}

.tou {
    width: 90%;
    height: 2.33333rem;
    background-color: rgb(207, 206, 206);
    font-size: 14px;
    border-radius: 5px;
    display: flex;
}

.d {
    width: 50%;
    height: 100%;
    display: flex;
}

.d>div {
    width: 50%;
    height: 100%;

}

.d>:nth-child(1) {
    display: flex;
    justify-content: center;
    align-items: center
}

.c {
    width: 50%;
    height: 100%;
    padding-right: 20px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.b>span {
    color: black;

}

.money {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    font-size: 14px;
}

.money>div>span {
    font-weight: 600;
    font-size: 24px;
    margin-right: 2px;
}

.money>div {
    display: flex;
    align-items: center
}

.img {
    width: 60%;
    height: 60%;
}

.man {
    width: 90%;
    height: 7rem;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
}

.man>li {
    width: 45%;
    height: 30%;
    border: 1px solid;
    font-size: 18px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.man>li>span {
    display: flex;
    align-items: flex-start;
    ;

}

.man>li>p {

    font-size: 12px;
}

.top_up {
    width: 90%;
    height: 13%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
}

.top {
    width: 90%;
    /* height: 20%; */
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    font-size: 16px;

    border-bottom: 1px solid;
}

.ipt {
    border: none;
}

.btn {
    margin-top: 5px;
    display: block;
    width: 90%;
    font-size: 16px;
    height: 100px;
    display: flex;
    color: #fff;
    justify-content: center;
    align-items: center;
    border-radius: 5px;
    background-color: #555;
}

.explain {
    width: 90%;
    font-size: 12px;
    color: #999;
}
</style>